<template>
  <div class="person">
    <h1>情况2：</h1>
    <h2>监视【ref】定义的【对象数据类型】</h2>
    <button @click="changeName">更改名字=={{person.name}}</button>
    <button @click="changeAge">更改年龄=={{person.age}}</button>
    <button @click="changePerson">更改全部信息=={{person}}</button>
  </div>
</template>

<script lang="ts" setup>
  import {ref,watch} from "vue";

  let person = ref({
    name:"王二",
    age:29
  })

  function changeName(){
    person.value.name += '-'
  }
  function changeAge(){
    person.value.age += 1
  }
  function changePerson(){
    person.value = {name:"李四", age:20}
  }

  watch(person,(newValue)=>{
    console.log('sum变化了', newValue)
  },{deep:true})

</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>
